<template>
	<div>
		<el-card class="mb-4" shadow="never">
			<div class="text-xl font-medium mb-[20px]">省市区选择</div>
            <selectArea :defaultData="state.default" @areaChange="areaDataChange" />
		</el-card>
	</div>
</template>

<script setup lang="ts" name="compSelectArea">
import { reactive } from 'vue';

const state = reactive({
	default: { province: '130000', city: '130300', area: '130304' },
	value: { province: '', city: '', area: '' }
});

const areaDataChange = (value) => {
	console.log(value);
    state.value.province = value.province.code;
    state.value.city = value.city.code;
    state.value.area = value.area.code;
};

</script>

<style scoped lang="scss"></style>